<template>
  <Table />

  <el-button type="primary" link @click="exportFile">导出excel</el-button>
  <XTable :schema="schema" :getData="getData">
    <template #imageUrl="{ row }">
      <img
        :src="row.imageUrl"
        :alt="row.skuName"
        style="width: 100px; height: 100px"
      />
    </template>

    <template #operator="{ row }">
      <el-button type="primary" link>添加</el-button>
      <el-button type="primary" link>修改</el-button>
      <el-button type="primary" link>删除</el-button>
    </template>

    <template #pdfName="{ row }">
      <el-button type="primary" link @click="showDrawer(row)">{{
        row.pdfName
      }}</el-button>
      <el-button type="primary" link @click="download(row)">下载</el-button>
    </template>
  </XTable>

  <el-drawer
    :size="pdfData.pdfWidth + 100"
    v-model="drawerVisible"
    :title="pdfData.pdfName"
    direction="rtl"
  >
    <vue-pdf-embed
      :source="pdfData.pdfSrc"
      :width="pdfData.pdfWidth"
      :height="pdfData.pdfHeight"
    />
  </el-drawer>

  <Sku> </Sku>
</template>

<script lang="ts" setup>
defineOptions({
  name: "App",
});
import Table from "./views/vxe-table/index.vue";
import Sku from "./views/sku/index.vue";
import VuePdfEmbed from "vue-pdf-embed";

import { ref } from "vue";
import { utils, writeFileXLSX } from "xlsx";

// https://docs.sheetjs.com/docs/demos/frontend/vue/
const exportFile = () => {
  /* generate worksheet from state */
  const ws = utils.json_to_sheet([
    {
      id: 1,
      skuName: "华为~",
      skuDesc: "遥遥领先",
      price: 6900,
      weight: 0.32,
      imageUrl: "/8.jpg",
    },
    {
      id: 2,
      skuName: "华为111~",
      skuDesc: "遥遥领先",
      price: 6900,
      weight: 0.32,
      imageUrl: "/8.jpg",
    },
  ]);
  /* create workbook and append worksheet */
  const wb = utils.book_new();
  utils.book_append_sheet(wb, ws, "Data");
  /* export to XLSX */
  writeFileXLSX(wb, "aaaa.xlsx");
};

const drawerVisible = ref(false);

const clientHeight = document.documentElement.clientHeight;

const pdfData = ref({
  pdfName: "",
  pdfSrc: "",
  pdfHeight: (clientHeight - 74 - 100) * 2,
  pdfWidth: (((clientHeight - 74 - 100) * 210) / 297) * 2,
});

const showDrawer = (row: any) => {
  drawerVisible.value = true;
  pdfData.value.pdfName = row.pdfName;
  pdfData.value.pdfSrc = row.pdfSrc;
};

const download = (row: any) => {
  const a = document.createElement("a");
  a.href = row.pdfSrc;
  a.download = row.pdfName;
  document.documentElement.appendChild(a);
  a.click();
  a.remove();
};

// const skuList = ref([
//   {
//     id: 1,
//     skuName: "华为~",
//     skuDesc: "遥遥领先",
//     price: 6900,
//     weight: 0.32,
//     imageUrl: "/8.jpg",
//   },
//   {
//     id: 2,
//     skuName: "华为111~",
//     skuDesc: "遥遥领先",
//     price: 6900,
//     weight: 0.32,
//     imageUrl: "/8.jpg",
//   },
// ]);

const schema = ref([
  {
    label: "序号",
    align: "center",
    width: 60,
    type: "index",
    key: "index",
  },
  {
    label: "sku名称",
    prop: "skuName",
    key: "skuName",
  },
  {
    label: "sku描述",
    prop: "skuDesc",
    key: "skuDesc",
  },
  {
    label: "sku价格",
    prop: "price",
    key: "price",
  },
  {
    label: "sku重量",
    prop: "weight",
    key: "weight",
  },
  {
    label: "sku图片",
    key: "imageUrl",
    slot: "imageUrl",
  },
  {
    label: "pdf",
    key: "pdfName",
    slot: "pdfName",
  },
  {
    label: "操作",
    key: "operator",
    slot: "operator",
  },
]);

const getData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = [];

      for (let i = 0; i < 10; i++) {
        const id = Math.round(Math.random() * 10000 + 10);
        data.push({
          id,
          skuName: "华为 " + id,
          skuDesc: "遥遥领先" + id,
          price: id,
          weight: id / 100,
          imageUrl: "/8.jpg",
          pdfName: "项目介绍.pdf",
          pdfSrc: "/项目介绍.pdf",
        });
      }

      resolve({
        total: 1000,
        list: data,
      });
    }, 200);
  });
};
</script>

<style>
.el-drawer__body {
  background-color: gray;
  padding: 50px;
}
</style>
